class Enlarge {
    constructor(el) {
        this.el = document.querySelector(el)
        this.imgObj = this.el.querySelector('.img')
        this.maskObj = this.el.querySelector('.mask')
        this.enlargeObj = this.el.querySelector('.enlarge')
        this.lis = this.el.querySelectorAll('ul li')
        this.img = this.el.querySelector('.box .img img')
        this.init()


    }
    init() {
        //移入移出事件
        this.OverOut()
        //鼠标移懂事件
        this.maskMove()
        this.TBlarge()
        //切换小图
        this.changepic()
    }
    OverOut() {
        this.imgObj.onmouseover = () => {
            this.maskObj.style.visibility = this.enlargeObj.style.visibility = 'visible'

        }
        this.imgObj.onmouseout = () => {
            this.maskObj.style.visibility = this.enlargeObj.style.visibility = 'hidden'
        }

    }

    getStyle(tabName, arrName) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(tabName)[arrName]
        } else {
            return tabName.currentStyle[arrName]  //当对象的键是变量时，用数组语法
        }
    }
    TBlarge() {
        //获得mask的宽高  img的宽高  large背景图的宽高  large放大镜的宽高
        let maskW = this.maskObj.offsetWidth
        let maskH = this.maskObj.offsetHeight
        //console.log(maskW, maskH);

        let imgW = this.el.querySelector('img').offsetWidth
        let imgH = this.el.querySelector('img').offsetHeight
        //console.log(imgW,imgH);


        let bglarge = this.getStyle(this.enlargeObj, 'background-size')  //800 800
        //console.log(this.enlargeObj,'background-size');
        let bgW = parseInt(bglarge.split(' ')[0])   //以空格的地方将此分成数组
        let bgH = parseInt(bglarge.split(' ')[1])

        this.enlargeObj.style.width = (maskW * bgW) / imgW + 'px'
        this.enlargeObj.style.height = (maskH * bgH) / imgH + 'px'
        //  console.log(this.enlargeObj.style.width,this.enlargeObj.style.height);

    }
    maskMove() {
        //鼠标移动事件
        this.imgObj.onmousemove = (evt) => {
            let e = evt || window.event
            let left = e.pageX - this.el.offsetLeft - this.maskObj.offsetWidth / 2
            // console.log(this.imgObj.offsetLeft);

            let top = e.pageY - this.el.offsetTop - this.maskObj.offsetHeight / 2

            if (left < 0) left = 0
            if (top < 0) top = 0

            let maskLeft = this.imgObj.offsetWidth - this.maskObj.offsetWidth
            let maskTop = this.imgObj.offsetHeight - this.maskObj.offsetHeight
            if (left > maskLeft) left = maskLeft
            if (top > maskTop) top = maskTop
            // console.log(top,left);


            this.maskObj.style.left = left + 'px'
            this.maskObj.style.top = top + 'px'
            // console.log(left,top);

            //同步large的背景图位置
            this.TBlargeWH(left, top)
        }
    }
    TBlargeWH(x, y) {
        let num1 = parseFloat(this.enlargeObj.style.width) / this.maskObj.offsetWidth * x
        let num2 = parseFloat(this.enlargeObj.style.height) / this.maskObj.offsetHeight * y
        //console.log(this.enlargeObj.style.width,this.enlargeObj.style.height);
        // console.log(num1,num2);

        this.enlargeObj.style.backgroundPosition = `-${num1} -${num2}`
    }
    changepic() {
        //点击事件
        // console.log(this.smalls);
        this.lis.forEach((item, i) => {
            item.onclick = () => {
                this.el.querySelector('ul li.active').className = ''
                item.className = 'active'
                this.img.src = item.querySelector('img').src
                this.enlargeObj.style.backgroundImage = `url(./img/${i + 1}.jpg)`

            }
        })

    }
}